<template>
  <div class="container">
    <!-- 卡片 -->
    <el-card
      class="box-card"
      :body-style="{ padding: '20px', minHeight: '230px' }"
    >
      <!-- 表单 -->
      <MyForm @search="search"></MyForm>
      <!-- 以上表单 -->

      <!-- 表格 -->
      <el-tabs value="first" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核" name="second"></el-tab-pane>
        <el-tab-pane label="已审核" name="third"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
      </el-tabs>

      <!-- 提示数据条数 -->
      <ShowNum :num="counts"></ShowNum>
      <!-- 以上为提示数据条数 -->
      <MyTable :tableData="tableData" type="choice">
        <template #operation="{ row }">
          <el-button type="text" size="small" @click="preview(row.id)"
            >预览</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="audit(row)"
            :disabled="+row.chkState !== 0"
            >审核</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="modify(row.id)"
            :disabled="+row.publishState === 1"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="grounding(row)">{{
            +row.publishState === 1 ? '下架' : '上架'
          }}</el-button>
          <el-button
            type="text"
            size="small"
            @click="del(row.id)"
            :disabled="+row.publishState === 1"
            >删除</el-button
          >
        </template>
      </MyTable>

      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="pagesizes"
        :page-size="pagesize"
        layout="prev, pager,next,sizes,jumper"
        :total="counts"
        :style="{ display: 'flex', justifyContent: 'end' }"
      >
      </el-pagination>
      <!-- 以上为表格 -->
    </el-card>
    <PreView
      :renderDia="renderDia"
      @close="showDia = flase"
      :options="options"
      ref="preview"
    ></PreView>
    <CheckAudit ref="CheckAudit" @init="getItems"></CheckAudit>
  </div>
</template>

<script>
import ShowNum from '@/components/QuestionBank/ShowNum.vue'
import MyForm from '@/components/QuestionBank/MyForm.vue'
import MyTable from '@/components/QuestionBank/MyTable'
import PreView from '../components/questions-preview.vue'
import CheckAudit from '../components/questions-check.vue'
import { parseTime } from '@/utils'
import { detail, choice, choicePublish, remove } from '@/api/hmmm/questions.js'

export default {
  data () {
    return {
      tableData: [],
      page: 1,
      pagesizes: [5, 10, 20, 50],
      pagesize: 5,
      counts: 0,
      chkState: '',
      form: {},
      renderDia: {},
      options: []
    }
  },
  components: { ShowNum, MyForm, MyTable, PreView, CheckAudit },
  methods: {
    // 根据条件发请求
    async getItems (form) {
      const obj = {
        page: this.page,
        pagesize: this.pagesize,
        ...form
      }
      if (this.chkState === 0 || this.chkState) {
        obj.chkState = this.chkState
      }
      const { data } = await choice(obj)
      data.items.forEach(item => {
        item.addDate = parseTime(item.addDate)
      })
      this.counts = data.counts
      this.tableData = data.items
    },

    search (data) {
      const form = {}
      for (const key in data) {
        if (data[key]) {
          form[key] = data[key]
        }
      }
      this.page = 1
      this.getItems(form)
    },
    // 审核状态导航栏
    handleClick (a) {
      console.log(a)
      if (a.label === '全部') {
        this.chkState = ''
      } else if (a.label === '待审核') {
        this.chkState = '0'
      } else if (a.label === '已审核') {
        this.chkState = '1'
      } else {
        this.chkState = '2'
      }
      this.search()
    },
    handleSizeChange (value) {
      this.pagesize = value
      this.getItems()
    },
    handleCurrentChange (value) {
      this.page = value
      this.getItems()
    },
    // 预览
    async preview (id) {
      try {
        const { data } = await detail({ id })
        data.addDate = parseTime(data.addDate)

        data.options.sort((a, b) => {
          return a.code < b.code ? -1 : 1
        })
        this.options = data.options.filter(item => item.isRight)
        this.options = this.options.map(item => item.id)
        this.renderDia = data
        this.$refs.preview.open()
      } catch (error) {
        this.$message.error('此试题无法查看，请重试')
        this.getItems()
      }
    },
    // 审核
    audit (id) {
      this.$refs.CheckAudit.open(id)
    },
    // 修改
    modify (id) {
      this.$router.push({ name: 'questions-new', query: { id } })
    },
    // 上下架
    grounding (row) {
      // 当点击上下架判断是下架还是上架
      const text = +row.publishState === 1 ? '下架' : '上架'
      this.$confirm('您确认' + text + '这道题目吗?', '提示', {

        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (+row.publishState === 1) {
            row.publishState = 2
          } else {
            row.publishState = 1
          }
          await choicePublish(row)
          this.$message({

            type: 'success',
            message: text + '成功!'
          })
          this.getItems()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '上架失败'
          })
        })
    },
    // 删除
    async del (a) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: a })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getItems()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  },
  created () {
    this.getItems()
  }
}
</script>

<style scoped lang="less">
.container {
  margin: 10px;
}
</style>
